<template>
  <el-drawer
    title="设置轮播图"
    v-model="dialogVisible"
    size="50%"
    :destroy-on-close="true"
  >
    <el-form
      :model="form"
      label-width="80px"
    >
      <el-form-item label="轮播图">
        <ChooseImage
          v-model="form.banners"
          :limit="9"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="submit"
        >
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref, reactive } from "vue";
import ChooseImage from "~/components/ChooseImage.vue";
import { readGoods, setGoodsBanner } from "~/api/goods";

import { toast } from "~/composables/util";

const dialogVisible = ref(false);

const goodsId = ref(0);

const form = reactive({
  banners: [],
});

const open = (row) => {
  console.log(row);
  goodsId.value = row.id;
  row.bannersLoading = true;
  readGoods(goodsId.value)
    .then((res) => {
      console.log("轮播图数据：", res);
      console.log(
        "获取轮播图地址：",
        res.goodsBanner.map((o) => o.url),
      );
      form.banners = res.goodsBanner.map((o) => o.url);
      dialogVisible.value = true;
    })
    .finally(() => {
      row.bannersLoading = false;
    });
};

const emit = defineEmits(["reloadData"]);

const loading = ref(false);
const submit = () => {
  loading.value = true;
  setGoodsBanner(goodsId.value, form)
    .then((res) => {
      toast("设置轮播图成功！");
      dialogVisible.value = false;
      emit("reloadData");
    })
    .finally(() => {
      loading.value = false;
    });
};

defineExpose({
  open,
});
</script>
